<template>
     <div class="container">
          <h1>Electron + Nut.js + Vue 3 Demo</h1>
          <div class="controls">
               <button @click="moveMouse">移动鼠标</button>
               <button @click="typeText">输入文本</button>
          </div>
          <div class="status">
               <p>状态: {{ status }}</p>
          </div>
     </div>
</template>

<script setup>
import { ref } from 'vue'
const { ipcRenderer } = require('electron')

const status = ref('就绪')

const moveMouse = async () => {
     try {
          status.value = '正在移动鼠标...'
          const result = await ipcRenderer.invoke('move-mouse', { x: 100, y: 100 })
          if (result.success) {
               status.value = '鼠标移动完成'
          } else {
               throw new Error(result.error)
          }
     } catch (error) {
          status.value = `错误: ${error.message}`
     }
}

const typeText = async () => {
     try {
          status.value = '正在输入文本...'
          const result = await ipcRenderer.invoke('type-text', 'Hello from Nut.js!')
          if (result.success) {
               status.value = '文本输入完成'
          } else {
               throw new Error(result.error)
          }
     } catch (error) {
          status.value = `错误: ${error.message}`
     }
}
</script>

<style>
.container {
     max-width: 800px;
     margin: 0 auto;
     padding: 20px;
     text-align: center;
}

.controls {
     margin: 20px 0;
}

button {
     margin: 0 10px;
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
     background-color: #4CAF50;
     color: white;
     border: none;
     border-radius: 4px;
}

button:hover {
     background-color: #45a049;
}

.status {
     margin-top: 20px;
     padding: 10px;
     background-color: #f5f5f5;
     border-radius: 4px;
}
</style>